import React, { Component } from 'react';
import '../styles/MyTabbar.scss'

class MyTabbar extends Component {
   
        //定义组件状态写法一：
        //state会保存在当前组件实例(this)身上
        state={
            currentIndex:0,
            list:[{icon:'icon-shouye',btn:'店铺'},{icon:'icon-fenlei1',btn:'分类'},{icon:'icon-31quanbushangpin           ',btn:'全部商品'},{icon:'icon-gouwuchekong',btn:'购物车'},{icon:'icon-xingmingyonghumingnicheng',btn:'个人中心'},]
        }
        handleClick(index){
            //更新下标
            this.setState({currentIndex: index})
        }
    render() {
        return (
            <div className='btns'>
            {/* */}
                {
                    this.state.list.map((item,index)=>{
                      return(
                        <div className={'tab '+(this.state.currentIndex===index?'active' :'')} key={index} 
                        onClick={()=>{this.handleClick(index)}}>
                        <span className={'iconfont '+ item.icon} ></span>
                        <div className='text'>{item.btn}</div>
                        </div>
                   
                      ) 
                    })
                }
            </div>
          
        );
    }

}
export default MyTabbar;